<template>
  <el-card>
    <div>
      <div style="margin: 10px 5px">
        <el-page-header @back="gotoIndex" style="font-size: 26px" title="返回首页" content="个人中心">
        </el-page-header>
      </div>

      <div style="margin: 10px 5px">
        <el-card>
          <el-form :model="userform" ref="userform" label-width="120px" :label-position="labelPosition">
            <el-form-item label="用户名: "  label-width="80px" prop="username">
              <el-input v-model="userform.username" style="width: 80%" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="密码: " label-width="80px" prop="idNumber">
              <el-input v-model="userform.password" show-password style="width: 80%" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机号: " label-width="80px" prop="phone">
              <el-input v-model="userform.phone" style="width: 80%" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="性别: " label-width="80px"  prop="sex">
              <el-radio  disabled v-model="userform.sex" label="1">男</el-radio>
              <el-radio disabled v-model="userform.sex" label="0">女</el-radio>
            </el-form-item>
            <el-form-item label="姓名: "  label-width="80px" prop="name">
              <el-input v-model="userform.name" style="width: 80%" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="身份证号: " label-width="80px" prop="idNumber">
              <el-input v-model="userform.idNumber" show-password style="width: 80%" :disabled="true">
              </el-input>
            </el-form-item>
            <el-form-item label="创建时间: " label-width="80px" prop="idNumber">
              <el-input v-model="userform.createTime" style="width: 80%" :disabled="true">
              </el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" style="font-size: 30px" @click="handleEdit">
                <i class="iconfont icon-r-add" style="font-size: 20px"></i>
                修改
              </el-button>
            </el-form-item>

          </el-form>
        </el-card>
      </div>




      <el-dialog title="提示" :visible.sync="dialogVisible">
        <!-- 这里记得添加:rules="rules"  ref="form"将规则绑定到form -->
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <el-form-item label="用户名"  label-width="80px" prop="username">
            <el-input v-model="form.username" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="密码"  label-width="80px" prop="username">
            <el-input v-model="form.password" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="手机号" label-width="80px" prop="phone">
            <el-input v-model="form.phone" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="性别" label-width="80px"  prop="sex">
            <el-radio v-model="form.sex" label="1">男</el-radio>
            <el-radio v-model="form.sex" label="0">女</el-radio>
          </el-form-item>
          <el-form-item label="姓名"  label-width="80px" prop="name">
            <el-input v-model="form.name" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" label-width="80px" prop="idNumber">
            <el-input v-model="form.idNumber" style="width: 80%">
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
        <span  slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          <i class="iconfont icon-r-left" style="font-size: 20px;"></i> 取 消</el-button>
        <el-button type="primary" @click="save">
          <i class="iconfont icon-r-yes" style="font-size: 20px;"></i>确 定</el-button>
        </span>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import {
  setUserName,
  getUserName
} from "@/utils/storage.js";

import request from "@/utils/request";
export default {
  components: {
  },
  data(){
    return{
      userName: getUserName() ,
      //存放表单数据
      form: {},
      userform:{},
      labelPosition: 'left',
      //默认设置提示表单为不可见
      dialogVisible: false,
      rules:{
        name:[
          {required: true, message: "请输入姓名", trigger: "blur"},
          {pattern: /^[\u4e00-\u9fa5]+$/, message: "格式错误", trigger: "blur"}
        ],
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          {mix:3,max:20, message: "用户名在3到20个字符", trigger: "blur"},
          {pattern: /^[a-zA-Z\d]+$/, message: "格式错误", trigger: "blur"}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, max: 20, message: "密码长度在6到20个字符", trigger: "blur",},
          {pattern: /^[a-zA-Z\d]+$/, message: "格式错误", trigger: "blur"}
        ],
        phone: [
          {required: true, message: "请输入电话号", trigger: "blur"},
          {min: 11, max: 11, message: "长度必须是11个字符", trigger: "blur",},
          //使用正则表达式输入的数据进行校验=> java基础我们讲过正则表达式
          {pattern: /^([1-9]\d*|0)$/, message: "请输入数字", trigger: "blur"}
        ],
        idNumber: [
          {required: true, message: "请输入身份证号码", trigger: "blur"},
          {min: 18, max: 18, message: "长度必须是18个字符", trigger: "blur"},
          {pattern: /^([1-9]\d*|0)$/, message: "请输入数字", trigger: "blur"}
        ]
      }

    }
  },
  created() {
      this.list();//调用list方法
  },
  methods:{
    list() {
      request.get("/api/user/"+ this.userName).then(res => {
        console.log("res-",res)
        this.userform =res.data.data
      })
    },
    gotoIndex(){
      this.$router.push("/userLayout");
    },
    save() {
        setUserName(this.form.username)
        this.$refs['form'].validate((valid)=>{
          console.log("valid",valid);
          if(valid){//进行效验,通过
            request.put("/api/user", this.form).then(res => {
              console.log(res)
              if(res.data.code == 1){
                this.$message({
                  type:"success",
                  message:"修改成功"
                })
                this.dialogVisible = false;
                this.userform=res.data.data
              }else  {
                this.$message({
                  type:"error",
                  message: res.data.msg
                })
                this.dialogVisible = false;
                //调用list方法, 刷新数据
                this.list();
              }
            }).catch(err => {
              this.$message.error('请求出错了：' + err.message)
            })
          }else {//效验没通过
            return false;
          }
        })
    },
    handleEdit(){
      this.form = JSON.parse(JSON.stringify(this.userform));
      // this.form = row
      this.dialogVisible= true;
      console.log("visible,",this.dialogVisible);
    },
  }
}

</script>
<style scoped lang="scss">
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-form {
  margin-top: 0;
}
.disabled-text {
  color: #bac0cd !important;
}
.blueBug {
  color: #419EFF !important;
  position: relative;
}

.blueBug::after {
  content: '';
  position: absolute;
  right: -6px;
  height: 14px;
  width: 0px;
  border-right: solid 1px #EBEEF5 !important;
}

.delBut {
  color: #F56C6C !important;
  position: relative;
}

.delBut::after {
  content: '';
  position: absolute;
  right: -6px;
  height: 14px;
  width: 0px;
  border-right: solid 1px #EBEEF5 !important;
}


</style>


